<template>
  <div class="pendlist" @click="gotoXq(item.id)">
    <div class="pendlist-rq">{{ item.comingTitle }}</div>
    <div class="pend-list">
      <div class="pend-img">
        <img :src="item.img" alt="" />
      </div>
      <div class="pend-list-r">
        <div class="pend-list-rl">
          <h3>{{ item.nm }}<span class="max" v-show="item.version"></span></h3>
          <p>
            <i>{{ item.wish }}</i
            >人想看
          </p>
          <p>主演：{{ item.star }}</p>
          <p>{{ item.showInfo }}</p>
        </div>
        <div class="pend-list-rr" @click.stop="
            $router.push({ path: '/buyticket', query: { id: item.id } })
          ">
          <div class="b" v-if="item.showStateButton" >
            {{ item.showStateButton.content }}
          </div>
          <div class="o" v-else>想看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
   methods:{
        gotoXq(id) {
          console.log(id);
            this.$router.push("/info/"+id);
        }
    }
};
</script>

<style lang="less" scoped>
.pendlist {
  padding-left: 15px;
  margin: 5px 0;
  .pendlist-rq {
    font-size: 14px;
    padding-top: 10px;
  }
  .pend-list {
    display: flex;
    .pend-img {
      margin-top: 12px;
      img {
        width: 64px;
        height: 90px;
      }
    }
    .pend-list-r {
      display: flex;
      width: 100%;
      margin-left: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eeeeee;
      .pend-list-rl {
        width: 213px;
        margin-top: 12px;
        padding-right: 5px;
        h3 {
          font-size: 17px;
          margin-top: 4px;
          margin-bottom: 4px;
          .max {
            display: inline-block;
            margin-left: 5px;
            background: url("../assets/v2dimax.png") no-repeat;
            background-size: 100% 100%;
            width: 43px;
            height: 14px;
          }
        }
        p {
           margin-bottom: 4px;
          font-size: 13px;
          margin-top: 3px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          i {
            color: #faaf00;
            font-size: 15px;
            font-weight: 700;
          }
        }
      }

      .pend-list-rr {
        margin-top: 12px;
        display: flex;
        align-items: center;
        div {
          width: 54px;
          text-align: center;
          line-height: 28px;
          font-size: 13px;
          height: 28px;
          color: white;
          border-radius: 20px;
          &.o {
            background-color: #faaf00;
            box-shadow: rgba(240, 61, 55, 0.15);
          }
          &.b {
            background-color: #3c9fe6;
            box-shadow: rgba(60, 159, 230, 0.15);
          }
        }
      }
    }
  }
}
</style>